<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery-ui-1.8.12.custom.min.js"
	type="text/javascript"></script>
<script src="js/plugin/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="js/plugin/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fileupload.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fileupload-ui.js" type="text/javascript"></script>
<script src="js/eslserver-common.js" type="text/javascript"></script>
<script src="js/eslserver-dialogObj.js" type="text/javascript"></script>
<script src="js/eslserver-fileupload.js" type="text/javascript"></script>
<link href="css/jquery/jquery.ui.all.css" rel="stylesheet"></link>
<link href="css/jquery/jquery.ui.dialog.css" rel="stylesheet"></link>
<link href="css/jquery/jquery.fileupload-ui.css" rel="stylesheet"></link>
<link href="css/eslserver-main.css" rel="stylesheet"></link>

<title>Manage ESL</title>

<script>
    var eslID = getFromAttribute(${eslID});
    if(!eslID) {
    	eslID = getFromAttribute(${param.eslID});
    }
    
    $(document).ready(function() {
		$("#container").addClass("ui-widget");

		$("#eslID").attr("value", eslID);
			
		loadESLInfoForm();
		
		$("#resetActButn").click(function() {
			$("#updateActButn").attr("disabled", true);
			$("#addActButn").removeAttr("disabled");
		});
		
		$("#backToMain").attr("value", "Back to Main");
		$("#backToMain").click(function(evt) {
			evt.preventDefault();
			window.top.location.href = "MainDashboard.jsp";
		});

		$.validator.addMethod("MACAddressChecker", function(value) {
            var ip = "^([0-9A-F]{2}[:-])([0-9A-F]{2})$";
                return value.match(ip);
        }, "Invalid MAC address(format: AA-BB)");
		
        $("#main").validate({
            rules: {
            	
            	eslName: {
            		 required: true     
            	},            	
            	eslMAC: {
                    required: true,
                    MACAddressChecker: true
                },                
                coorName: {
                	required: true
                }                
            },
            
            messages: {
                coorName: {
                	required: "Please add a Coordinator first"
                }            	
            }
        });
		
	});
	
	function loadESLInfoForm() {
		var coordinatorID = 0;
		
		if(!eslID){
			$("#upload_zone").hide();
			$("#updateActButn").hide();
			
			$("#addActButn").click(function() {
				$("#main").attr("action", "/eslserver/AddESL.do");
				$("#main").attr("method", "post");
				$("#main").submit();
			});
		} else {
			$.getJSON("/eslserver/LoadESLInfo.do?eslID=" + eslID, function(data) {
			    $("#eslID").val(data.ESLID);
			    $("#eslName").val(data.name);
			    $("#eslMAC").val(data.macAddress);
			    $("#eslDescription").val(data.description);	
			    coordinatorID = data.coordinator.coordinatorID;
			})
			
			$("#hiddenESLID").attr("value", eslID);
			initFileUpload(1, eslID);
			$("#addActButn").hide();
			
			$("#updateActButn").click(function() {
				$("#main").attr("action", "/eslserver/AddESL.do");
				$("#main").attr("method", "post");
				$("#main").submit();
			});
		}
		
		$.getJSON("/eslserver/CoordinatorDropdown.do", function(
				dropdowndata) {
			setdropdown(dropdowndata, "#coorName", coordinatorID);
		});	
	}
	
</script>
</head>
<body id="container">
	<fieldset class="mainFieldSet talentForm">
		<legend class="mainLegend">ESL Info</legend>
		<form id="main" accept-charset="UTF-8">
			<table>
				<tr style="display: none">
					<td>ESL ID</td>
					<td><input type="text" id="eslID" name="eslID" size="30" />
				</tr>
				<tr>
					<td>ESL Name<em> *</em></td>
					<td><input id="eslName" name="eslName" type="text" size="30" />
					</td>
				</tr>
				<tr>
					<td>ESL MAC Address<em> *</em></td>
					<td><input id="eslMAC" name="eslMAC" type="text" size="30" />
					</td>
				</tr>
				<tr>
				    <td>Coordinator<em> *</em></td>
				    <td><select name="coorName" id="coorName"></select>
				    </td>
				</tr>    
				<tr>
					<td>Description
					</td>
					<td><textarea id="eslDescription" name="eslDescription"
							rows="3" cols="50" class="expand100-200"></textarea></td>
				</tr>
				<tr>
					<td colspan="2"><input id="addActButn" type="button"
						value="ADD" /> <input id="updateActButn" name="updateActButn"
						type="button" value="UPDATE" /> <input id="resetActButn"
						name="resetActButn" type="reset" value="RESET" /></td>
				</tr>

			</table>
		</form>
	</fieldset>
	<fieldset id="upload_zone">
		<legend class="mainLegend">Upload Image</legend>
		<form id="file_upload"
			action="${pageContext.request.contextPath}/FileUploadServlet.do"
			method="POST" enctype="multipart/form-data" accept-charset="UTF-8">

			<div id="drop_zone_1" class="uploadBtn">
				<input type="file" id="file_1" name="Original">Upload Image</input>
			</div>
			<table id="files_1" style="background: yellow;"></table>
			<br /> <input type="hidden" id="hiddenESLID" name="hiddenESLID" />
		</form>
	</fieldset>

	<br />

	<div>
		<input type=button id="backToMain" />
	</div>

</body>